<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>插槽</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
      .parent {
        width: 600px;
        min-height: 150px;
        height: auto;
        background-color: pink;
        padding: 20px;
        margin-top: 10px;
      }
      .child {
        width: 80%;
        min-height: 100px;
        height: auto;
        padding: 0px 10px;
        border: 1px solid black;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="parent">
        <h1>父组件</h1>
        <child-component>
          <p slot="header">页头内容</p>
          <p>主要内容</p>
          <p>
            具名插槽通过slot标签中name属性提供一个自定的名称,在模板页面中通过为标签提供slot属性指定插槽的名称
          </p>
          <p slot="footer">页脚内部</p>
        </child-component>
      </div>
    </div>
    <script>
      Vue.component("child-component", {
        template: `
                     <div class='child'>
                        <header>
                          <strong>页头</strong>
                          <slot name='header'></slot>
                        </header>
                        <main>
                          <hr>
                           <slot></slot>
                          <hr>
                        </main>
                        <footer>
                          <strong>页脚</strong>
                          <slot name='footer'></slot>
                        </footer>  
                     </div>
                     `,
      });
      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
